<ng-container>
  <mat-card class="card" [style.width.px]="cardWidth">
    <mat-card-header>
      <!-- <div mat-card-avatar class="avatar" [style.background-image]="avatarLoadFlg?'url(' + avatarURL + ')':''">
            </div> -->
      <img
        mat-card-avatar
        class="avatar"
        [src]="enemyData.images.icon"
        loading="lazy"
        appImgErrorHandle
      />
      <mat-card-title class="header-text">
        <app-mat-filtering-selector
          [title]="'ENEMY.NAME'"
          [model]="selectedEnemyIndex"
          (modelChange)="onSelectEnemy($event)"
          [originList]="enemyList"
          [optionValueProperty]="'index'"
          [optionInnerTextProperty]="'names'"
          [selectedDispalyProperty]="'name'"
          [selectedDispalyIcon]="false"
          [service]="enemyService"
          [currentLanguage]="currentLanguage"
        >
        </app-mat-filtering-selector>
        <br />
        <mat-form-field appearance="legacy" floatLabel="always">
          <mat-label [innerText]="'ENEMY.PLAYERNUM' | translate"></mat-label>
          <mat-select [(ngModel)]="selectedPlayerNum" (ngModelChange)="onChangePlayerNum($event)">
            <ng-container *ngFor="let playerNum of playerNumOptions">
              <mat-option [value]="playerNum" [innerText]="playerNum"></mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
      </mat-card-title>
    </mat-card-header>
    <mat-card-content class="content">
      <mat-divider></mat-divider>
      <mat-expansion-panel
        class="mat-elevation-z0 expand"
        [expanded]="true"
        (afterCollapse)="onExpandStatusChanged()"
        (afterExpand)="onExpandStatusChanged()"
      >
        <mat-expansion-panel-header>
          <mat-panel-title>
            <span [innerText]="'ENEMY.PROPS' | translate"></span>
          </mat-panel-title>
          <mat-panel-description> </mat-panel-description>
        </mat-expansion-panel-header>
        <!-- レベル選択 -->
        <mat-form-field appearance="legacy" floatLabel="always">
          <mat-label [innerText]="'PROPS.LEVEL' | translate"></mat-label>
          <mat-select [(ngModel)]="selectedLevel" (ngModelChange)="onChangeLevel($event)">
            <ng-container *ngFor="let option of levelOptions">
              <mat-option [value]="option" [innerText]="(option.level | number: '1.0-0')">
              </mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
        <!-- 属性情報 -->
        <div class="grid-wrapper">
          <div class="grid-column-all">
            <div class="placeholder"></div>
          </div>
          <ng-container *ngFor="let prop of props">
            <span class="left-align" [innerText]="'PROPS.' + prop | translate"></span>
            <span
              class="right-align"
              [innerText]="selectedLevelProps[prop].isPercent?(selectedLevelProps[prop].value | rate: getPropRate(prop) :selectedPlayerNum-1 | percent: '1.0-1' | noComma):(selectedLevelProps[prop].value | rate: getPropRate(prop) :selectedPlayerNum-1 | number: '1.0-0' | noComma)"
              [matTooltip]="selectedLevelProps[prop].value | rate: getPropRate(prop) :selectedPlayerNum-1"
              matTooltipPosition="right"
            >
            </span>
          </ng-container>
          <ng-container *ngFor="let prop of props_sub">
            <ng-container *ngIf="selectedLevelProps[prop]">
              <span class="left-align" [innerText]="'PROPS.' + prop | translate"></span>
              <span
                class="right-align"
                [innerText]="selectedLevelProps[prop].isPercent?(selectedLevelProps[prop].value | percent: '1.0-1' | noComma):(selectedLevelProps[prop].value | number: '1.0-0' | noComma)"
                [matTooltip]="selectedLevelProps[prop].value"
                matTooltipPosition="right"
              >
              </span>
            </ng-container>
          </ng-container>
        </div>
      </mat-expansion-panel>
    </mat-card-content>
  </mat-card>
</ng-container>
